@select-prefix: ~'select';

.search-input-without-border() {
    .@{select-prefix}-selection-search-input {
        width: 100%;
        padding: 0;
        border: none;
        outline: none;
    }
}

.@{select-prefix} {
    position: relative;
    display: inline-block;

    &-disabled {
        &,
        & input {
            cursor: not-allowed;
        }

        .@{select-prefix}-selector {
            opacity: 0.3;
        }
    }

    &-show-arrow&-loading {
        .@{select-prefix}-arrow {
            &-icon::after {
                transform: none;

                box-sizing: border-box;
                width: 12px;
                height: 12px;
                margin-top: 4px;

                border: 2px solid rgb(var(--border-color));
                border-top-color: transparent;
                border-bottom-color: transparent;
                border-radius: 100%;

                animation: select-loading-icon 0.5s infinite;
            }
        }
    }

    // ============== Selector ===============
    .@{select-prefix}-selection-placeholder {
        pointer-events: none;
        opacity: 0.4;
    }

    // ============== Search ===============
    .@{select-prefix}-selection-search-input {
        font-size: var(--font-size-sm);
        color: rgb(var(--text-color));
        appearance: none;

        &::-webkit-search-cancel-button {
            display: none;
            appearance: none;
        }
    }

    // --------------- Single ----------------
    &-single {
        .@{select-prefix}-selector {
            position: relative;

            display: flex;

            box-sizing: border-box;
            height: 28px;
            padding: 0 10px;

            transition: all 0.15s;

            .@{select-prefix}-selection-search {
                width: 100%;
                line-height: 0;

                &-input {
                    width: 100%;
                    height: 100%;
                }
            }

            .@{select-prefix}-selection-item,
            .@{select-prefix}-selection-placeholder {
                pointer-events: none;

                position: absolute;
                left: 0;
                height: 100%;
                width: 100%;
                padding: 0 18px 0 10px;
                box-sizing: border-box;

                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;

                font-size: var(--font-size-sm);
                line-height: 28px;
                display: inline-block;
                align-items: center;
            }
        }

        // Not customize
        &:not(.@{select-prefix}-customize-input) {
            .@{select-prefix}-selector {
                border: 1px solid rgb(var(--border-color));
                border-radius: var(--border-radius-base);

                .search-input-without-border();
            }
        }
    }

    // -------------- Multiple ---------------
    &-multiple .@{select-prefix}-selector {
        display: flex;
        flex-wrap: wrap;
        border: 1px solid rgb(var(--border-color));
        border-radius: var(--border-radius-base);

        .@{select-prefix}-selection-item {
            flex: none;

            margin-right: 2px;
            padding: 0 8px;

            background: #bbb;
            border-radius: 4px;

            &-disabled {
                cursor: not-allowed;
                opacity: 0.5;
            }
        }

        .@{select-prefix}-selection-overflow {
            display: flex;
            flex-wrap: wrap;
            width: 100%;

            &-item {
                flex: none;
                max-width: 100%;
            }
        }

        .@{select-prefix}-selection-search {
            position: relative;
            max-width: 100%;

            &-input,
            &-mirror {
                box-sizing: border-box;
                padding: var(--padding-xs) var(--padding-sm);
            }

            &-mirror {
                position: none;
                z-index: 999;
                top: 0;
                left: 0;

                white-space: nowrap;

                visibility: hidden;
            }
        }

        .search-input-without-border();
    }

    &-borderless {
        &:not(.@{select-prefix}-customize-input) {
            .@{select-prefix}-selector {
                border-color: transparent;
            }
        }

        &.@{select-prefix} {
            // =============== Focused ===============
            &-focused,
            &:hover {
                .@{select-prefix}-selector {
                    border-color: transparent !important;
                }
            }
        }
    }

    // ================ Icons ================
    &-allow-clear {
        &.@{select-prefix}-multiple .@{select-prefix}-selector {
            padding-right: 20px;
        }

        .@{select-prefix}-clear {
            position: absolute;
            top: 0;
            right: 20px;
        }
    }

    &-show-arrow {
        &.@{select-prefix}-multiple .@{select-prefix}-selector {
            padding-right: 20px;
        }

        .@{select-prefix}-arrow {
            pointer-events: none;

            position: absolute;
            top: 0;
            right: var(--margin-sm);

            display: flex;
            align-items: center;

            height: 100%;

            font-size: var(--font-size-xxs);
            color: rgb(var(--text-color-secondary));

            &-icon::after {
                content: '';

                transform: translateY(5px);

                display: inline-block;

                width: 0;
                height: 0;

                border: 5px solid transparent;
                border-top-color: rgb(var(--border-color));
            }
        }
    }

    // =============== Focused ===============
    &-focused,
    &:hover {
        .@{select-prefix}-selector {
            border-color: rgb(var(--primary-color)) !important;
        }
    }

    // ============== Dropdown ===============
    &-dropdown {
        position: absolute;

        z-index: 1070;

        background: rgb(var(--bg-color-secondary));
        border: 1px solid rgb(var(--border-color));
        border-radius: var(--border-radius-base);
        box-shadow: var(--box-shadow-base);
        &-hidden {
            display: none;
        }
    }

    // =============== Option ================
    &-item {
        cursor: pointer;
        padding: var(--padding-sm) var(--padding-base);
        font-size: var(--font-size-sm);

        // >>> Group
        &-group {
            // font-size: 80%;
            // font-weight: bold;
            // color: #999;
            padding: 0;

            &:not(:first-child) {
                border-top: 1px solid rgb(var(--border-color));
            }
        }

        // >>> Option
        &-option {
            position: relative;
            transition: all 0.15s;

            &-grouped {
                // padding-left: 24px;
            }

            .@{select-prefix}-item-option-state {
                pointer-events: none;
                position: absolute;
                top: 4px;
                right: 0;
            }

            // ------- Active -------
            &-active {
                background: #ddd;
            }

            // ------ Disabled ------
            &-disabled {
                color: rgb(var(--text-color-tertiary));
            }
        }

        // >>> Empty
        &-empty {
            padding: var(--padding-xs) 0;
            color: rgb(var(--text-color-tertiary));
            font-size: var(--font-size-sm);
            text-align: center;
        }
    }
}

.@{select-prefix}-selection__choice-zoom {
    transition: all 0.3s;
}

.@{select-prefix}-selection__choice-zoom-appear {
    transform: scale(0.5);
    opacity: 0;

    &&-active {
        transform: scale(1);
        opacity: 1;
    }
}
.@{select-prefix}-selection__choice-zoom-leave {
    transform: scale(1);
    opacity: 1;

    &&-active {
        transform: scale(0.5);
        opacity: 0;
    }
}

.effect() {
    transform-origin: 0 0;
    animation-duration: 0.3s;
    animation-fill-mode: both;
}

.@{select-prefix}-dropdown {
    &-slide-up-enter,
    &-slide-up-appear {
        .effect();

        opacity: 0;
        animation-play-state: paused;
        animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
    }

    &-slide-up-leave {
        .effect();

        opacity: 1;
        animation-play-state: paused;
        animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
    }

    &-slide-up-enter&-slide-up-enter-active&-placement-bottomLeft,
    &-slide-up-appear&-slide-up-appear-active&-placement-bottomLeft,
    &-slide-up-enter&-slide-up-enter-active&-placement-bottomRight,
    &-slide-up-appear&-slide-up-appear-active&-placement-bottomRight {
        animation-name: select-dropdown-slide-up-in;
        animation-play-state: running;
    }

    &-slide-up-leave&-slide-up-leave-active&-placement-bottomLeft,
    &-slide-up-leave&-slide-up-leave-active&-placement-bottomRight {
        animation-name: select-dropdown-slide-up-out;
        animation-play-state: running;
    }

    &-slide-up-enter&-slide-up-enter-active&-placement-topLeft,
    &-slide-up-appear&-slide-up-appear-active&-placement-topLeft,
    &-slide-up-enter&-slide-up-enter-active&-placement-topRight,
    &-slide-up-appear&-slide-up-appear-active&-placement-topRight {
        animation-name: select-dropdown-slide-down-in;
        animation-play-state: running;
    }

    &-slide-up-leave&-slide-up-leave-active&-placement-topLeft,
    &-slide-up-leave&-slide-up-leave-active&-placement-topRight {
        animation-name: select-dropdown-slide-down-out;
        animation-play-state: running;
    }
}

@keyframes select-dropdown-slide-up-in {
    0% {
        transform-origin: 0% 0%;
        transform: scaleY(0);
        opacity: 0;
    }

    100% {
        transform-origin: 0% 0%;
        transform: scaleY(1);
        opacity: 1;
    }
}

@keyframes select-dropdown-slide-up-out {
    0% {
        transform-origin: 0% 0%;
        transform: scaleY(1);
        opacity: 1;
    }

    100% {
        transform-origin: 0% 0%;
        transform: scaleY(0);
        opacity: 0;
    }
}

@keyframes select-dropdown-slide-down-in {
    0% {
        transform-origin: 100% 100%;
        transform: scaleY(0);
        opacity: 0;
    }

    100% {
        transform-origin: 100% 100%;
        transform: scaleY(1);
        opacity: 1;
    }
}

@keyframes select-dropdown-slide-down-out {
    0% {
        transform-origin: 100% 100%;
        transform: scaleY(1);
        opacity: 1;
    }

    100% {
        transform-origin: 100% 100%;
        transform: scaleY(0);
        opacity: 0;
    }
}

@keyframes select-loading-icon {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}
